<template>
  <div v-show="!isFilterCallbackMode" class="op-group comp-op-common">
    <div class="op-title">常用</div>
    <div class="option-item">
      <div class="title-row no-sub">
        <span class="label">
          <span
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, cellCommonDeleteSelectRows)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          删除所选单元格所在的行
        </span>
        <a-button
          class="op-btn"
          type="primary"
          size="small"
          @click="doOption(cellCommonDeleteSelectRows)"
          >确定</a-button
        >
      </div>
    </div>
    <div class="option-item">
      <div class="title-row no-sub">
        <span class="label">
          <span
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, cellCommonKeepSelectRows)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          仅保留所选单元格所在的行
        </span>
        <a-button
          class="op-btn"
          type="primary"
          size="small"
          @click="doOption(cellCommonKeepSelectRows)"
          >确定</a-button
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import DataStore, { OptionPreViewAction } from '@/store/modules/dataview'
import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class CellCommon extends Vue {
  get isFilterCallbackMode() {
    return DataStore.vrCurrenSetMode !== null
  }
  /** 替换值 */
  replaceValue: string = ''

  /** 操作(删除所选单元格所在的行) */
  cellCommonDeleteSelectRows: string =
    OptionPreViewAction.cellCommonDeleteSelectRows

  /** 操作(仅保留所选单元格所在的行) */
  cellCommonKeepSelectRows: string =
    OptionPreViewAction.cellCommonKeepSelectRows

  /** 鼠标移入 */
  onMouseEnter(event: any, action: string) {
    const target = event.target as HTMLElement
    if (target) {
      DataStore.setPreviewAction(action)
      DataStore.setHoverYPos(target.getBoundingClientRect().top - 16)
    }
  }

  /** 鼠标移出 */
  onMouseLeave() {
    DataStore.setHoverYPos(-1)
  }

  /** 执行命令 */
  doOption(option: string) {
    if (option === `${OptionPreViewAction.cellCommonDeleteSelectRows}`) {
      this.$emit('actiondone', {
        action: option,
        desc: '单元格 > 常规 > 删除所选行',
      })
    }
    if (option === `${OptionPreViewAction.cellCommonKeepSelectRows}`) {
      this.$emit('actiondone', {
        action: option,
        desc: '单元格 > 常规 > 仅保留所选行',
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import url('../op.less');
</style>
